<template>
  <BasicModal
    v-bind="$attrs"
    @register="registerModal"
    :title="displayModuleTitle"
    @ok="onButtonOkClick"
    :body-style="{ height: '450px' }"
  >
    <!-- 由于需要弹出日期时间选择框，高度至少需要450px才能完全显示 -->
    <BasicForm @register="registerForm" />
  </BasicModal>
</template>
<script lang="ts">
  import { defineComponent, ref, unref, computed } from 'vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { BasicForm, useForm } from '/@/components/Form/index';

  import { timeSeriesNumberDataFormSchema } from './numberdata.data';
  import { addPointNumberData, updatePointNumberData } from '/@/api/demo/timeseries';
  import { TSNumDataDto } from '/@/api/demo/model/timeSeriesModel';

  import { useMessage } from '/@/hooks/web/useMessage';

  import { OperationTypeEnum } from '/@/enums/appEnum';
  import { QcUnifyTransToChildProps } from '/#/QcUnify';
  import { displayTitle } from '/@/utils/QcUnifyUtil';

  const { createMessage } = useMessage();

  export default defineComponent({
    name: 'AddOrUpdateTimeSeriesNumberData',
    components: { BasicModal, BasicForm },
    emits: ['success', 'register'],
    setup(_, { emit }) {
      // console.log('AddOrUpdate.vue setup props.pointOptions=' + props.pointOptions);
      console.log('AddOrUpdate.vue setup');
      const qcUnifyProps = ref<QcUnifyTransToChildProps>();

      /**
       * 显示的模块标题，用于显示在弹出框中的标题
       */
      let displayModuleTitle = computed(() => {
        return displayTitle(qcUnifyProps.value);
      });

      const [registerForm, { setFieldsValue, resetFields, validate, updateSchema }] = useForm({
        labelWidth: 120,
        schemas: timeSeriesNumberDataFormSchema,
        showActionButtonGroup: false,
        actionColOptions: {
          span: 24,
        },
      });

      /**
       * 根据父组件传递过来的参数获取对应的操作，操作不同所对应的界面不同
       */
      const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
        console.log('AddOrUpdate.vue useModalInner data', data);
        //接收父组件传递的数据
        if (data != undefined && data != null) {
          qcUnifyProps.value = unref(data);
        }

        resetFields(); //重置表单
        setModalProps({ confirmLoading: false });

        //判断传入的点号下拉选项不为空时进行赋值和设置默认选中项
        if (
          qcUnifyProps.value.options != undefined &&
          qcUnifyProps.value.options != null &&
          qcUnifyProps.value.options.length > 0x0
        ) {
          //设置表单中的点号下拉选择
          updateSchema({
            field: 'pointid',
            componentProps: {
              options: data.options,
            },
          });
          // 如果是修改数据，根据传入的id获取数据后进行赋值
          if (qcUnifyProps.value.operateType == OperationTypeEnum.EDIT) {
            //使用传入过来的data对表单进行赋值
            setFieldsValue({
              ...data.data,
            });
            //修改时设置点号、数据时标不能修改，只能修改数据值
            updateSchema({ field: 'pointid', componentProps: { disabled: true } });
            onSelectedPointChanged(data.data.pointid, data.options, true);
          } else {
            //新增时设置点号下拉框选中值为第1个
            let defaultPointId = data.options[0x0].value;
            setFieldsValue({ pointid: defaultPointId });
            //新增时设置点号、数据时标可以修改；根据默认选中的第一个点号设置数据时标的选择精度
            onSelectedPointChanged(defaultPointId, data.options, false);
            //新增时，设置点号下拉框选择事件，在选择的点号变化时根据点号属性设置数据时标选择精度
            updateSchema({
              field: 'pointid',
              componentProps: {
                disabled: false,
                onChange: (e) => {
                  console.log('点号选中项变化', e);
                  onSelectedPointChanged(e, data.options, false);
                },
              },
            });
          }
        }
      });

      /**
       * 选中的点号变化时处理事件；在初始化点号选中项或点号选中项变化时根据选中的点号设置数据时标和数据值单位
       */
      function onSelectedPointChanged(pointId, points, disabled) {
        //获取修改数据点号对象信息
        const point = points.find((p) => p.pointid === pointId);
        if (point != null) {
          console.log('point', point);
          //设置数据值单位
          if (!point.unit) {
            //单位为空
            updateSchema({
              field: 'value',
              label: '数据值',
            });
          } else {
            updateSchema({
              field: 'value',
              label: '数据值(' + point.unit + ')',
            });
          }

          //根据点号的时段类型处理数据时标精度
          if (point.tmtype === 3 || point.tmtype === '3')
            updateSchema({
              field: 'tm',
              componentProps: {
                disabled: disabled,
                picker: 'date',
                // valueFormat: 'YYYY-MM-DD',
                format: 'YYYY-MM-DD', //控制显示的格式，显示到日期时要使用format，使用valueFormat无效
                // showTime: false,//showTime设置为false输入中也会有时分秒
                showTime: {
                  //控制选择时的输入框
                  format: 'YYYY-MM-DD',
                },
              },
            });
          //时段类型为天
          else if (point.tmtype === 6 || point.tmtype === '6')
            updateSchema({
              field: 'tm',
              componentProps: { disabled: disabled, picker: 'month', format: 'YYYY-MM' },
            });
          //时段类型为月
          else if (point.tmtype === 8 || point.tmtype === '8')
            updateSchema({
              field: 'tm',
              componentProps: { disabled: disabled, picker: 'year', format: 'YYYY' },
            });
          //时段类型为年
          else
            updateSchema({
              field: 'tm',
              componentProps: {
                //显示时分秒配置，不写不显示选择具体的时分秒
                showTime: {
                  format: 'YYYY-MM-DD HH:mm:ss',
                },
                //设置不可选择未来时间
                disabledDate: (current) => {
                  return current && current > Date.now();
                },
                valueFormat: 'YYYY-MM-DD HH:mm:ss',
                disabled: disabled,
              },
            }); //其他时段类型设置选择到时分秒
        } else {
          //没有对应的点号对象信息时也需要设置数据时标不能编辑
          updateSchema({ field: 'tm', componentProps: { disabled: disabled } });
        }
      }

      /**
       * 点击确认按钮，根据不同的op调用对应方法保存信息
       */
      async function onButtonOkClick() {
        //对应操作的步骤为：验证表单、提交后台保存、关闭modal、调用父组件事件刷新数据
        //数据验证和处理方法一致
        const values = await validate();
        setModalProps({ confirmLoading: true });
        if (qcUnifyProps.value.operateType == OperationTypeEnum.ADD) {
          try {
            //调用接口进行保存
            addPointNumberData(values).then((res) => {
              if (!res || Object.keys(res).length == 0) {
                createMessage.success('保存成功。', 2);
              }
              opSuccess();
            });
          } finally {
            setModalProps({ confirmLoading: false });
          }
        } else if (qcUnifyProps.value.operateType == OperationTypeEnum.EDIT) {
          //调用接口进行保存
          updatePointNumberData(values).then((res) => {
            if (!res || Object.keys(res).length == 0) {
              createMessage.success('修改成功。', 2);
            }
            opSuccess();
          });
        } else {
          createMessage.error('当前操作类型错误，无法进行对应操作。', 5);
        }
      }

      //操作成功后
      function opSuccess() {
        closeModal();
        emit('success');
      }

      return {
        displayModuleTitle,
        registerModal,
        registerForm,
        onButtonOkClick,
        opSuccess,
      };
    },
  });
</script>
